<div style="width: 960px; margin: 0 auto">
  <form nz-form [formGroup]="validateForm">
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired>E-mail</nz-form-label>
      <nz-form-control [nzSpan]="12" [nzErrorTip]="emailError" nzHasFeedback>
        <input
          id="disabled"
          type="text"
          nz-input
          placeholder="请输入Email"
          formControlName="email"
        />
      </nz-form-control>
      <ng-template #emailError let-control>
        <span *ngIf="control.hasError('required')">请输入 Email</span>
        <span *ngIf="control.hasError('email')">Email 格式不正确</span>
      </ng-template>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired>密码</nz-form-label>
      <nz-form-control [nzSpan]="12" nzErrorTip="请输入密码" nzHasFeedback>
        <input
          type="password"
          nz-input
          placeholder="请输入密码"
          formControlName="password"
        />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired>确认密码</nz-form-label>
      <nz-form-control
        [nzSpan]="12"
        [nzErrorTip]="checkPasswordError"
        nzHasFeedback
      >
        <input
          type="password"
          nz-input
          placeholder="请确认密码"
          formControlName="checkPassword"
        />
      </nz-form-control>
      <ng-template #checkPasswordError let-control>
        <span *ngIf="control.hasError('required')">请确认密码</span>
        <span *ngIf="control.hasError('checkPassword')">
          两次输入的密码不一致
        </span>
      </ng-template>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired>昵称</nz-form-label>
      <nz-form-control [nzSpan]="12" [nzErrorTip]="nicknameError" nzHasFeedback>
        <input
          type="text"
          nz-input
          placeholder="请输入昵称"
          formControlName="nickname"
        />
      </nz-form-control>
      <ng-template #nicknameError let-control>
        <span *ngIf="control.hasError('required')">请输入昵称</span>
        <span *ngIf="control.hasError('nickname')">该昵称已存在</span>
      </ng-template>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired>手机号</nz-form-label>
      <nz-form-control [nzSpan]="12" [nzErrorTip]="phoneError" nzHasFeedback>
        <input
          type="text"
          nz-input
          placeholder="请输入手机号"
          formControlName="phone"
        />
      </nz-form-control>
      <ng-template #phoneError let-control>
        <span *ngIf="control.hasError('required')">请输入手机号</span>
        <span *ngIf="control.hasError('pattern')">手机号格式不正确</span>
      </ng-template>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4">出生日期</nz-form-label>
      <nz-form-control [nzSpan]="12">
        <nz-date-picker formControlName="birthday"></nz-date-picker>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item *ngFor="let control of address.controls; let i = index">
      <nz-form-label [nzSpan]="4" nzRequired *ngIf="i == 0">
        <span>收货地址</span>
      </nz-form-label>
      <nz-form-control
        [nzSpan]="12"
        [nzOffset]="i == 0 ? 0 : 4"
        nzErrorTip="请输入收货地址"
        nzHasFeedback
      >
        <input
          type="text"
          nz-input
          [formControl]="control"
          placeholder="请输入收货地址"
        />
        <button
          nz-button
          nzType="link"
          nzDanger
          class="addon-btn"
          (click)="removeAddress(i)"
        >
          <i nz-icon nzType="delete" nzTheme="outline"></i>
        </button>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control [nzSpan]="12" [nzOffset]="4">
        <button nz-button nzType="dashed" (click)="addAddress()">
          <i nz-icon nzType="plus" nzTheme="outline"></i>
          <span>添加</span>
        </button>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control [nzSpan]="12" [nzOffset]="4">
        <label nz-checkbox formControlName="isAgree">
          <span>I have read the <a>agreement</a></span>
        </label>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control [nzSpan]="12" [nzOffset]="4">
        <button nz-button nzType="primary" [disabled]="validateForm.invalid">
          <span>保存</span>
        </button>
        <button nz-button (click)="reset()">重置</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>
